import { setLayoutMode } from '@/store/reducers/layout';
import { Dropdown, Space, Menu, MenuProps } from 'antd';
import { t } from 'i18next';
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import AgentService from '@/modules/Agent';
import { RootState } from '@/store';

interface MenusProps {
	layoutStatus?: string;
	changeLayout: (status: string) => void;
}

const MenuList = (props: MenusProps) => {
	const dispatch = useDispatch();
	const [activeKey, setActiveKey] = useState<string>('3');
	const { configure } = useSelector((state: RootState) => state);

	const changeKey = (value: any) => {
		console.log(value);
		if (AgentService.isIMSession && (value.key === '2' || value.key === '4')) return;
		setActiveKey(value.key);
		const mode = menus.find(item => item.key === value.key)!.mode;
		changeLayout(mode);
		dispatch(setLayoutMode(mode));
	};

	const { layoutStatus, changeLayout } = props;

	useEffect(() => {
		if (AgentService.isIMSession && (activeKey === '2' || activeKey === '4')) {
			changeKey({ key: '3' });
		}
	}, [AgentService.isIMSession]);

	const items: MenuProps['items'] = [
		{
			key: '1',
			icon: (
				<span className="select-icon">
					<svg className="widget-icon" aria-hidden="true" style={{ visibility: activeKey === '1' ? 'visible' : 'hidden' }}>
						<use xlinkHref={'#icon-widget-duigou'}></use>
					</svg>
				</span>
			),
			label: (
				<div className="menu-label" onClick={() => changeKey({ key: '1' })}>
					<span className="icon-box">
						<svg className="widget-icon" aria-hidden="true">
							<use xlinkHref={activeKey === '1' ? '#icon-widget-a-bianzu411' : '#icon-widget-a-bianzu4'}></use>
						</svg>
					</span>
					<span className="text">{t('left-column')}</span>
				</div>
			)
		},
		{
			key: '2',
			icon: (
				<span className="select-icon">
					<svg className="widget-icon" aria-hidden="true" style={{ visibility: activeKey === '2' ? 'visible' : 'hidden' }}>
						<use xlinkHref={activeKey === '2' ? '#icon-widget-duigou' : ''}></use>
					</svg>
				</span>
			),
			label: (
				<div className="menu-label" onClick={() => changeKey({ key: '2' })}>
					<span className="icon-box">
						<svg className="widget-icon" aria-hidden="true">
							<use xlinkHref={activeKey === '2' ? '#icon-widget-a-bianzu4beifen1' : '#icon-widget-a-bianzu4beifen'}></use>
						</svg>
					</span>
					<span className="text">{t('right-column')}</span>
				</div>
			),
			disabled: AgentService.isIMSession
		},
		{
			key: '3',
			icon: (
				<span className="select-icon">
					<svg className="widget-icon" aria-hidden="true" style={{ visibility: activeKey === '3' ? 'visible' : 'hidden' }}>
						<use xlinkHref={activeKey === '3' ? '#icon-widget-duigou' : ''}></use>
					</svg>
				</span>
			),
			label: (
				<div className="menu-label" onClick={() => changeKey({ key: '3' })}>
					<span className="icon-box">
						<svg className="widget-icon" aria-hidden="true">
							<use xlinkHref={activeKey === '3' ? '#icon-widget-a-bianzu4beifen21' : '#icon-widget-a-bianzu4beifen2'}></use>
						</svg>
					</span>
					<span className="text">{t('left-right-column')}</span>
				</div>
			)
		},
		{
			key: '4',
			icon: (
				<span className="select-icon">
					<svg className="widget-icon" aria-hidden="true" style={{ visibility: activeKey === '4' ? 'visible' : 'hidden' }}>
						<use xlinkHref={activeKey === '4' ? '#icon-widget-duigou' : ''}></use>
					</svg>
				</span>
			),
			label: (
				<div className="menu-label" onClick={() => changeKey({ key: '4' })}>
					<span className="icon-box">
						<svg className="widget-icon" aria-hidden="true">
							<use xlinkHref={activeKey === '4' ? '#icon-widget-a-bianzu4beifen31' : '#icon-widget-a-bianzu4beifen3'}></use>
						</svg>
					</span>
					<span className="text">{t('fold-up')}</span>
				</div>
			),
			disabled: AgentService.isIMSession
		}
	];

	const [menus, setMenus] = useState([
		{
			id: 1,
			icon: '#icon-widget-a-bianzu4',
			acitveIcon: '#icon-widget-a-bianzu411',
			classname: '',
			text: t('left-column'),
			isSelect: false,
			mode: 'left',
			key: '1'
		},
		{
			id: 2,
			icon: '#icon-widget-a-bianzu4beifen',
			acitveIcon: '#icon-widget-a-bianzu4beifen1',
			classname: '',
			text: t('right-column'),
			isSelect: false,
			mode: 'right',
			key: '2'
		},
		{
			id: 3,
			icon: '#icon-widget-a-bianzu4beifen2',
			acitveIcon: '#icon-widget-a-bianzu4beifen21',
			classname: '',
			text: t('left-right-column'),
			isSelect: true,
			mode: 'full',
			key: '3'
		},
		{
			id: 4,
			icon: '#icon-widget-a-bianzu4beifen3',
			acitveIcon: '#icon-widget-a-bianzu4beifen31',
			classname: '',
			text: t('fold-up'),
			isSelect: false,
			mode: 'close',
			key: '4'
		}
	]);

	return (
		<div className="widget-menu-layout-box" style={{ display: configure.hideLayoutMenu ? 'none' : '' }}>
			<Dropdown menu={{ items }} align={{ offset: [-20, 20] }}>
				<a onClick={e => e.preventDefault()}>
					<Space>
						<span className="menu-collapse">
							<svg className="widget-icon" aria-hidden="true">
								<use xlinkHref={menus.find(item => item.key === activeKey)?.icon}></use>
							</svg>
						</span>
					</Space>
				</a>
			</Dropdown>
		</div>
	);
};

export default MenuList;
